/**
* 拍照
*/
<template>
	<view>
		<cu-custom bgColor="v-bg-main v-font-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">拍照</block>
		</cu-custom>
		<view>
			<view class="title">{{title}}
				<image @click="orientations" style="width:60rpx;height:60rpx;float:right;margin-right: 20rpx;" src="../../static/image/orientation.png"></image>
			</view>
			<camera :device-position="orientation" flash="off" binderror="error" style="width: 100%; height: 60vh;">
				<cover-view v-if="index==2" class="cover-view"> 
					<cover-image class="cover-image" :src="imageUrl"></cover-image>
				</cover-view>
				<cover-view v-else class="cover-view">
					<cover-image class="cover-Faceview" :src="imageUrl"></cover-image>
				</cover-view>
			</camera>
			<view class="titles">拍照</view>
			<view class="ring">
				<view class="ring1" @click="takePhoto">
					<view class="ring2">
					</view>
				</view>
			</view>
		</view>
		<v-loading :loadModal="loadModal" msg="上传中..."></v-loading>
	</view>
</template>

<script>
	import vLoading from '@/components/v-loading/v-loading.vue';
	export default {
		components: {
			vLoading
		},
		data() {
			return {
				imgUploadUrl:this.$profile.url+"/console/layui/upload",
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				loadModal:false,
				title: '面诊拍照',
				index: 1,
				imageUrl: '',
				orientation: 'front',
				src: ''
			}
		},
		onLoad(option) {
			const that = this;
			const index = option.index == 1 ? 1 : 2;
			const title = option.index == 1 ? "面诊拍照" : "舌诊拍照";
			const imageUrl = option.index == 1 ? "../../static/image/face1.png" : "../../static/image/tongue1.png";
			that.title = title;
			that.index = index;
			that.imageUrl = imageUrl;
			this.ctx = uni.createCameraContext();
		},
		methods: {
			orientations() {
				this.orientation = this.orientation == 'front' ? 'back' : 'front';
			},
			takePhoto() {
				const that = this;
				that.loadModal = true;
				const innerAudioContext = uni.createInnerAudioContext()
				innerAudioContext.autoplay = true
				innerAudioContext.src = 'static/voice/111.mp3'
				innerAudioContext.onPlay(() => {})
				this.ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						that.$http.imgUpload(that.imgUploadUrl,res.tempImagePath).then(res=>{
							that.loadModal = false;
							uni.showToast({
								icon: 'success',
								title: '上传成功'
							});
							var pages = getCurrentPages();
							var prevPage = pages[pages.length - 2];
							if(that.index == 1){
								prevPage.$vm.addForm.face.checkImg = res.title;
								prevPage.$vm.dataList[0].content = '已上传成功（可编辑）';
							}else{
								prevPage.$vm.addForm.tongue.checkImg = res.title;
								prevPage.$vm.dataList[1].content = '已上传成功（可编辑）';
							}
							setTimeout(function(){
								uni.navigateBack({
									delta: 1
								});
							},1000)
						})
					},
					fail: (res) => {
						that.loadModal = false;
						uni.showToast({
							icon: 'none',
							title: '网络错误，请稍后重试'
						});
					}
				})
			},
			error(e) {
				console.log(e.detail)
			}
		}
	}
</script>

<style>
	page {
		background-color: #000;
	}

	.title {
		color: #fff;
		width: 100%;
		text-align: center;
		margin-top: 40rpx;
		height: 80rpx;
		line-height: 60rpx;
		font-size: 30rpx;
	}

	.cover-view {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cover-image {
		width: 60%;
		height: 60%;
	}

	.cover-Faceview {
		width: 70%;
		height: 90%;
	}

	.titles {
		color: #1F648B;
		width: 100%;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
	}

	.ring {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: 50rpx;
	}

	.ring1 {
		height: 120rpx;
		width: 120rpx;
		background-color: #000;
		border: 1rpx solid #fff;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ring2 {
		height: 110rpx;
		width: 110rpx;
		background-color: #fff;
		border-radius: 50%;
	}
</style>
